<template>
  <div>
    <EditTableHeaderCell v-if="getIsEdit">
      {{ getTitle }}
    </EditTableHeaderCell>
    <span v-else>{{ getTitle }}</span>
    <BasicHelp v-if="getHelpMessage" :text="getHelpMessage" :class="`${prefixCls}__help`" />
  </div>
</template>
<script lang="ts">
import type { PropType } from 'vue'
import type { BasicColumn } from '../types/table'
import { defineComponent, computed } from 'vue'
import BasicHelp from '/@/vbenComponents/Basic/src/BasicHelp.vue'
import EditTableHeaderCell from './EditTableHeaderIcon.vue'
// import { useDesign } from '/@/hooks/web/useDesign';

export default defineComponent({
  name: 'TableHeaderCell',
  components: {
    EditTableHeaderCell,
    BasicHelp,
  },
  props: {
    column: {
      type: Object as PropType<BasicColumn>,
      default: () => ({}),
    },
  },
  setup(props) {
    // const { prefixCls } = useDesign('basic-table-header-cell');
    const prefixCls = 'basic-table-header-cell'

    const getIsEdit = computed(() => !!props.column?.edit)
    const getTitle = computed(() => props.column?.customTitle || props.column?.title)
    const getHelpMessage = computed(() => props.column?.helpMessage)

    return { prefixCls, getIsEdit, getTitle, getHelpMessage }
  },
})
</script>
<style lang="less">
// 这种方式无效
// @prefix-cls: 'basic-table-header-cell';

.basic-table-header-cell {
  &__help {
    margin-left: 8px;
    color: rgb(0 0 0 / 65%) !important;
  }
}
</style>
